<template>
    <qly-base-page :title="$t('common.balance')" ref="skyBasePageRef" type="data"
                   bg-page-color="#f5f5f5" padding="18rpx 0 0">
        <tr-card margin="0 24rpx" padding="24rpx 24rpx 1rpx" border-radius="12rpx">
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-width="180rpx">
                <uni-forms-item name="account" :label="labelObj.advanceDate" required>
                    <uni-datetime-picker type="date" v-model="form.date"/>
                </uni-forms-item>
                <uni-forms-item name="account" :label="labelObj.advanceAmount" required>
                    <uni-easyinput type="digit" v-model="form.account" :placeholder="labelObj.placeHolderAdvanceAmount"/>
                </uni-forms-item>
                <uni-forms-item name="account" :label="labelObj.advanceType" required>
                    <up-radio-group v-model="form.type">
                        <up-radio v-for="(item, index) in balanceTypeList"
                                  :key="index" :label="item.label"
                                  :name="item.value">
                        </up-radio>
                    </up-radio-group>
                </uni-forms-item>
                <template v-if="form.type===BalanceTypeEnum.receiveCustomers.value">
                    <uni-forms-item name="account" :label="labelObj.numberGuests" required>
                        <uni-easyinput type="number" v-model="form.account" :placeholder="labelObj.placeHolderNumberGuests"/>
                    </uni-forms-item>
                    <uni-forms-item name="account" :label="labelObj.submitCompany" required>
                        <uni-easyinput type="digit" v-model="form.account" :placeholder="labelObj.placeHolderSubmitCompany"/>
                    </uni-forms-item>
                </template>
                <template v-else>
                    <up-gap height="2" bgColor="#f5f5f5" marginTop="-16" marginBottom="12"></up-gap>
                    <template v-for="(k,i) in form.extraMeal" :key="i">
                        <view class="card-row row-between">
                            <view>{{$t('common.addMeals')}}&nbsp;{{i+1}}：</view>
                            <view>
                                <up-tag v-if="i===0" :text="$t('common.add')" size="mini" icon="plus" @tap="addExtraMeal"></up-tag>
                                <up-tag v-else :text="$t('common.delete')" size="mini" icon="close-circle" type="error" @tap="deledtExtraMeal(i)"></up-tag>
                            </view>
                        </view>
                        <up-gap height="10" bgColor="#fff" ></up-gap>
                        
                        <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                                   label-width="180rpx">
                            <uni-forms-item name="account" :label="labelObj.addMealsNumber" required>
                                <uni-easyinput type="number" v-model="k.attr1" :placeholder="labelObj.placeHolderAddMealsNumber"/>
                            </uni-forms-item>
                            <uni-forms-item name="account" :label="labelObj.selectRestaurant" required>
                                <tr-select v-model="k.attr2" :data="range"/>
                            </uni-forms-item>
                            <uni-forms-item name="account" :label="labelObj.selectPackage" required>
                                <tr-select v-model="k.attr3" :data="range"/>
                            </uni-forms-item>
                            <uni-forms-item name="account" :label="labelObj.settlementAmount" required>
                                <uni-easyinput type="digit" v-model="k.attr4" :placeholder="labelObj.placeHolderSettlementAmount"/>
                            </uni-forms-item>
                            <uni-forms-item name="account" :label="labelObj.amountReceived" required>
                                <uni-easyinput disabled v-model="k.attr5" :placeholder="labelObj.placeHolderAmountReceived"/>
                            </uni-forms-item>
                        </uni-forms>
                        <up-gap height="2" bgColor="#f5f5f5" marginBottom="16"></up-gap>
                    </template>
                </template>
                <uni-forms-item name="account" :label="labelObj.uploadVoucher" required>
                    <qly-upload-multiple v-model="form.images"/>
                    
                </uni-forms-item>
                <view class="gray-text">
                    {{ $t('common.imageNote')}}
                </view>
                <uni-forms-item name="account" :label="labelObj.remark">
                    <uni-easyinput type="textarea" v-model="form.account" :placeholder="labelObj.placeHolderRemark"/>
                </uni-forms-item>
            
            </uni-forms>
        </tr-card>
        
        <template #footer>
            <view class="tr-btns-box">
                <view class="btn-item">
                    <up-button :text="$t('common.cancel')" size="large" plain @tap="cancel"></up-button>
                </view>
                <view class="btn-item">
                    <up-button :text="$t('common.confirm')" color="#5572f0" size="large"
                               @tap="qly.form.pass(submit,formRef)"></up-button>
                </view>
            </view>
        </template>
    </qly-base-page>
</template>
<script setup>

import {BalanceTypeEnum} from '@/enums/user'


const labelObj=computed(()=>{
    return {
        advanceDate: $t('common.advance')+$t('common.date')+':',
        advanceAmount: $t('common.advanceAmount')+':',
        placeHolderAdvanceAmount: $t('common.pleaseEnter')+' '+$t('common.advanceAmount'),
        advanceType: $t('common.advance')+' '+$t('common.type'),
        numberGuests: $t('common.numberGuests')+':',
        placeHolderNumberGuests: $t('common.pleaseEnter') +' '+ $t('common.numberGuests'),
        submitCompany: $t('common.submitCompany') +' '+ $t('common.amount'),
        placeHolderSubmitCompany: $t('common.pleaseEnter') +' '+ $t('common.submitCompany') +' '+ $t('common.amount'),
        uploadVoucher: $t('common.upload') +' '+ $t('common.voucher')+'/'+$t('common.image')+':',
        remark: $t('common.remark')+':',
        placeHolderRemark: $t('common.pleaseEnter')+' '+$t('common.remark'),
        addMealsNumber: $t('common.addMeals')+' '+$t('common.number1')+":",
        placeHolderAddMealsNumber: $t('common.pleaseEnter')+' '+$t('common.addMeals')+' '+$t('common.number1'),
        selectRestaurant: $t('common.select')+' '+$t('common.restaurant')+":",
        selectPackage: $t('common.select')+' '+$t('common.package')+":",
        settlementAmount: $t('common.settlement')+' '+$t('common.amount')+":",
        placeHolderSettlementAmount: $t('common.pleaseEnter')+' '+$t('common.settlement')+' '+$t('common.amount'),
        amountReceived: $t('common.amountReceived')+':',
        placeHolderAmountReceived: $t('common.pleaseEnter')+' '+$t('common.amountReceived'),
        
        
    }
})


const formRef = ref()
const form = ref({
    date: '',
    account: '',
    password: '',
    images: [],
    type: 1,
    extraMeal: [{
        attr1: '',
        attr2: '',
        attr3: '',
        attr4: '',
        attr5: '',
    }]
})

const rules = {
    // 对name字段进行必填验证
    account: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
    password: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourPassword'),
            },
        ],
    }
}

const range = ref([{
    value: 0,
    label: "篮球运动",
}, {
    value: 1,
    label: "足球运动",
}, {
    value: 2,
    label: "游泳健身运动"
}, {
    value: 3,
    label: "跑步有氧运动",
}, {
    value: 4,
    label: "网球运动"
}, {
    value: 5,
    label: "羽毛球运动"
}, {
    value: 6,
    label: "乒乓球运动"
}, {
    value: 7,
    label: "保龄球运动"
}, {
    value: 1,
    label: "足球运动",
}, {
    value: 2,
    label: "游泳健身运动"
}, {
    value: 3,
    label: "跑步有氧运动",
}, {
    value: 4,
    label: "网球运动"
}, {
    value: 5,
    label: "羽毛球运动"
}, {
    value: 6,
    label: "乒乓球运动"
}, {
    value: 7,
    label: "保龄球运动"
}])
const balanceTypeList = computed(() => {
    return Object.values(BalanceTypeEnum)
})

// 取消
const cancel = () => {
    uni.navigateBack()
}

const submit = () => {
    console.log('submit')
}

const addExtraMeal=()=>{
    form.value.extraMeal.push({
        attr1: '',
        attr2: '',
        attr3: '',
        attr4: '',
        attr5: '',
    })
}
const deledtExtraMeal=(index)=>{
    form.value.extraMeal.splice(index,1)
}
</script>
<style scoped lang="scss">
.input-box {
    background-color: #f5f5f5;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

:deep(.bang-input-base-bgc) {
    background-color: #fff;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
}

/* #ifdef H5 */
:deep(.qly-select) {
    padding: 8rpx 8rpx 8rpx 16rpx !important;
}

/* #endif */

:deep(.uni-forms-item__content) {
    display: flex;
    align-items: center;
}
.gray-text{
    font-size: 22rpx;
    margin-bottom: 32rpx;
}
</style>
